<template>
    <div>
    <editordlg v-if="isShowEditDlg"  v-on:on-close-handler="closeAddDlgZipDlg" 
    v-on:on-click-category="onClickSpecCategory" 
    title="修改规格" oldtitle="旧名字" newtitle="新名字"
    :oldname="oldzipname" newplaceholder="请输入新名字"></editordlg>
    <el-dialog
        title="添加规格"
        :visible.sync="isDlgShow"
        width="60%"
        v-on:close="closeHandler()"
        center>
        <span>
            
            <el-row>
                <el-col :span="3">
                        <div>*规格名称:</div>
                    </el-col>
                 <el-col :span="21">
                    <el-input
                        placeholder="请输入内容"
                        v-model="inputtxt"
                        clearable>
                    </el-input>
                 </el-col>
            </el-row>
             <el-row>
                <el-col :span="3">
                        <div>*规格目录:</div>
                    </el-col>
                 <el-col :span="21">
                    <el-cascader
                        placeholder="请选择：可搜索"
                        :options="options"
                        filterable
                        change-on-select
                        @change="handleItemChange"
                        clearable>
                    </el-cascader>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                        <div>*规格列表:</div>
                    </el-col>
                 <el-col :span="21">
                    <el-table
                    :data="commodityspecs"
                    style="width: 100%"
                    v-loading="loading"
                    stripe
                    border
                    >
                    <el-table-column
                    fixed
                    prop="name"
                    label="规格名称"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    >
                     <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pgbar">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pagesize"
                        layout="prev, pager, next, jumper"
                        :total="count">
                    </el-pagination>
                      </div>
                 </el-col>
            </el-row>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveSpec()">添加</el-button>
            <el-button @click="closeHandler()">取消</el-button>
        </span>
    </el-dialog>
    </div>
</template>
<script>
import persistence from "@/lib/persistence";
import editordlg from "../common/editordlg";
export default {
    props: ["productId"],
    components: { editordlg },
    created() {
        this.findSpecCategory(0, 100);
    },
    name: "addcommodityspec",
    data() {
        return {
            isShowEditDlg: false,
            options: [],
            isDlgShow: true,
            inputtxt: "",
            admin: persistence.get("admin"),
            specCategoryId: null,
            currentPage: 1,
            pagesize: 5,
            count: 0,
            loading: false,
            oldzipname: "",
            commodityspecs: [],
            newzipname: "",
            selValue: []
        };
    },
    methods: {
        onClickSpecCategory(name) {
            this.newzipname = name;
            this.$axiosPost(
                "/AdminService/updateSpec",
                {
                    session: this.admin.session,
                    spec: {
                        id: this.selid,
                        name: this.newzipname,
                        specCategoryId: this.specCategoryId
                    }
                },
                response => {
                    this.$message({
                        message: "修改成功",
                        type: "warning"
                    });
                    this.reflushHandler();
                    this.isShowEditDlg = false;
                }
            );
        },
        handleItemChange(value) {
            if (value == null || value.length == 0) {
                this.specCategoryId = null;
                return;
            }
            this.specCategoryId = parseInt(value[value.length - 1]);
            this.loading = true;
            this.findSpec((this.currentPage - 1) * this.pagesize, this.pagesize);
        },
        findSpec(skip, take) {
            this.$axiosPost(
                "/AdminService/findSpec",
                {
                    session: this.admin.session,
                    opts: {
                        where: {
                            specCategoryId: this.specCategoryId
                        },
                        skip: skip,
                        take: take
                    }
                },
                response => {
                    this.count = response.data.count;
                    this.commodityspecs = this.formatCommodityspecsList(response.data.list);
                    this.loading = false;
                },
                error => {
                    this.loading = false;
                }
            );
        },
        closeAddDlgZipDlg() {
            this.isShowEditDlg = false;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.reflushHandler();
        },
        handleEdit(index, row) {
            this.selid = row.id;
            this.oldzipname = row.name;
            this.isShowEditDlg = true;
        },
        handleDelete(index, row) {
            const id = row.id;
            this.$confirm("此操作将永久删除该规格, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$axiosPost(
                    "/AdminService/deleteSpec",
                    {
                        session: this.admin.session,
                        specId: id
                    },
                    response => {
                        if (response.data.ok) {
                            this.$message({
                                message: "删除成功",
                                type: "warning"
                            });
                            this.reflushHandler();
                        }
                    }
                );
            });
        },
        removeSpecCategory(item) {
            var index = this.options.indexOf(item);
            if (index !== -1) {
                this.options.splice(index, 1);
            }
        },
        reflushHandler() {
            this.loading = true;
            this.findSpec((this.currentPage - 1) * this.pagesize, this.pagesize);
        },
        findSpecCategory(skip, take) {
            this.$axiosPost(
                "/AdminService/findSpecCategory",
                {
                    session: this.admin.session,
                    opts: {
                        where: {
                            productId: this.productId
                        },
                        skip: skip,
                        take: take
                    }
                },
                response => {
                    this.options = this.$findCategory(response.data.list, this.options);
                }
            );
        },
        saveSpec() {
            if (this.inputtxt == "") {
                this.$message({
                    message: "请输入规格名称",
                    type: "warning"
                });
                return;
            }
            if (this.specCategoryId == null) {
                this.$message({
                    message: "请输入规格目录",
                    type: "warning"
                });
                return;
            }
            this.$axiosPost(
                "/AdminService/saveSpec",
                {
                    session: this.admin.session,
                    spec: {
                        name: this.inputtxt,
                        specCategoryId: this.specCategoryId
                    }
                },
                response => {
                    this.$message({
                        message: "添加规格成功！",
                        type: "warning"
                    });
                    this.reflushHandler();
                    this.$emit("addcommodityspec");
                }
            );
        },
        closeHandler() {
            this.isShowEditDlg = false;
            this.isDlgShow = false;
            this.$emit("closeAddcommodityspec");
        },
        formatCommodityspecsList(list) {
            let userlist = [];
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                userlist.push({
                    id: element.id,
                    name: element.name,
                    specCategoryId: element.specCategoryId
                });
            }
            return userlist;
        }
    }
};
</script>

<style scoped>
.pgbar {
    text-align: center;
}
.addBar {
    margin-bottom: 5px;
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>